
<!DOCTYPE html>
<html>
<head>
  <title>LZ 8bit像素画在线制作器-趣味画图工具软件</title>
		 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="description" content="有趣的8bit像素画在线制作生成程序，支持多步骤保存，以及图像的多种方式导入与导出。" />
        <meta name="keywords" content="8bit画,像素画,点阵图,像素画软件,8-bit画,在线画图,ico在线制作,在线生成" />
<!--
                                             ____
   ___                                      .-~. /_"-._
  `-._~-.                                  / /_ "~o\  :Y
      \  \                                / : \~x.  ` ')
       ]  Y                              /  |  Y< ~-.__j      -------------------------
      /   !                        _.--~T : l  l<  /.-~      /                         \
     /   /                 ____.--~ .   ` l /~\ \<|Y   -----\  JENN SCHIFFER MADE THIS |
    /   /             .-~~"        /| .    ',-~\ \L|        \    WOWOWOWOWOWOWOWOW     /
   /   /             /     .^   \ Y~Y \.^>/l_   "--'         \________________________/
  /   Y           .-"(  .  l__  j_j l_/ /~_.-~    .
 Y    l          /    \  )    ~~~." / `/"~ / \.__/l_
 |     \     _.-"      ~-{__     l  :  l._Z~-.___.--~
 |      ~---~           /   ~~"---\_  ' __[>
 l  .                _.^   ___     _>-y~
  \  \     .      .-~   .-~   ~>--"  /
   \  ~---"            /     ./  _.-'
    "-.,_____.,_  _.--~\     _.-~
                ~~     (   _}
                        `. ~(
                          )  \
                         /,`--'~\--'
-->



  <link rel="stylesheet" href="build/make8bitart.min.css" />
  <!--//baidu 统计-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?a02988708f44019678bff1f776991a7d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!--//baidu 统计-->
</head>

<body id="welcome-to-the-space-jam">

<!--
                                                          .--.__
                                                      .~ (@)  ~~~---_
                                                     {     `-_~,,,,,,)
                                                     {    (_  ',       ---- haha nope
                                                      ~    . = _',
                                                       ~-   '.  =-'
                                                         ~     :
      .                                             _,.-~     ('');
      '.                                         .-~        \  \ ;
        ':-_                                _.--~            \  \;      _-=,.
          ~-:-.__                       _.-~                 {  '---- _'-=,.
             ~-._~--._             __.-~                     ~---------=,.`
                 ~~-._~~-----~~~~~~       .+++~~~~~~~~-__   /
                      ~-.,____           {   -     +   }  _/
                              ~~-.______{_    _ -=\ / /_.~
                                   :      ~--~    // /         ..-
                                   :   / /      // /         ((
                                   :  / /      {   `-------,. ))
                                   :   /        ''=--------. }o
                      .=._________,'  )                     ))
                      )  _________ -''                     ~~
                     / /  _ _
                    (_.-.'O'-'.        HEADER INFO  -->

  <div id="header" class="draggy" title="关于">
    <div class="controls">
      <img class="ui-dragger" src="assets/draggybits/dragger.png" alt="drag">
    </div>

    <h3>LZ 8bit像素画<br>在线制作器</h3>
	<p>可以轻松在线绘制可爱的像素画，不要忘记保存哦~
	<br><br><span style="color:#999;font-size:12px">如果您喜欢这个工具，可以使用以下按钮分享到社交网络，谢谢。:-) <a href="http://www.lizibuluo.com/lianxi" target="blank">使用与建议反馈</a></span>
	<br><div class="bdsharebuttonbox"><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script></p>
    <div id="minimized-tools-list"></div>
  </div>

<!--
                       _..--+~/@-~--.
                   _-=~      (  .   '
                _-~     _.--=.\ \'''' --- BOOTY HAD ME LIKE...
              _~      _-       \ \_\
             =      _=          '--'
            '      =                             .
           :      :       ____                   '=_. ___
      ___  |      ;                            ____ '~--.~.
           ;      ;                               _____  } |
        ___=       \ ___ __     __..-...__           ___/__/__
           :        =_     _.-~~          ~~--.__
      _____ \         ~-+-~                   ___~=_______
           ~@#~~ == ...______ __ ___ _--~~--_                  SOCIAL LINKS
-->

  <div id="what" class="draggy" title="关于这个工具?" data-title="what">
    <div class="controls">
	  <img class="ui-hider" src="assets/draggybits/hider.png" alt="minimize">
      <img class="ui-dragger" src="assets/draggybits/dragger.png" alt="drag">

    </div>

    <h4>关于这个工具？</h4>

    <p>这是一个可以在线制作有趣的8-bit像素画的工具。</p>
  </div>

  <!--
                                 .       .
                                / `.   .' \
                        .---.  <    > <    >  .---.
                        |    \  \ - ~ ~ - /  /    |
                         ~-..-~             ~-..-~
                     \~~~\.'                    `./~~~/
                      \__/                        \__/
                       /                  .-    .  \
                _._ _.-    .-~ ~-.       /       }   \/~~~/
            _.-'q  }~     /       }     {        ;    \__/
 butts --- {'__,  /      (       /      {       /      `. ,~~|   .     .
            `''''='~~-.__(      /_      |      /- _      `..-'   \\   //
                        / \   =/  ~~--~~{    ./|    ~-.     `-..__\\_//_.-'
                       {   \  +\         \  =\ (        ~ - . _ _ _..---~
                       |  | {   }         \   \_\
                      '---.o___,'       .o___,      TOOLBOX -->

  <div id="toolbox" class="draggy" title="画布与笔刷" data-title="tools">
    <div class="controls">
	      <img class="ui-hider" src="assets/draggybits/hider.png" alt="minimize">
      <img class="ui-dragger" src="assets/draggybits/dragger.png" alt="drag">

    </div>

    <div id="instruments" class="inner">
      <h4>工具</h4>
      <ul>
        <li><img class="current-tool icon-button" id="pencil" src="assets/pencil.png" alt="draw" data-href="#draw" role="button" title="画笔" /></li>
        <li><img id="paint" src="assets/paint.png" alt="paint" class="icon-button" data-href="#paint" role="button" title="油漆桶" /></li>
      </ul>
    </div>

    <div id="editing" class="inner">
      <h4>编辑</h4>
      <ul>
        <li><img id="cut" src="assets/cut.png" alt="cut" class="icon-button" data-href="#cut" role="button" title="剪切" /></li>
        <li><img id="copy" src="assets/copy.png" alt="copy" class="icon-button" data-href="#copy" role="button" title="复制" /></li>
        <li><img id="paste" src="assets/paste.png" alt="paste" class="icon-button" data-href="#paste" role="button" title="粘贴" /></li>
      </ul>

      <ul class="instructions paste">
        <li>点击需要粘贴的位置，定位在左上角。</li>
      </ul>

      <input type="submit" id="undo" title="ctrl+z" value="撤销" disabled="disabled" />
      <input type="submit" id="redo" title="ctrl+y" value="重做" disabled="disabled" />
      <input type="submit" value="新画布" id="new-canvas" />
    </div>

    <div id="size" class="inner">
      <h4>笔刷大小</h4>
      <input id="pixel-size" class="pixel-size-input" type="number" min="2" max="100" step="1" value="15" />
      <input id="pixel-size-slider" class="pixel-size-input" type="range" min="2" max="100" step="1" value="15" />
      <div id="pixel-size-demo" class="color-demo"> </div>
    </div>
  </div>

  <!--
                                     _..-=~=-._
                                 _.-~'          ~.
                     __..---~~~~~                 ~.
                _.-~~                      _.._     ~.
            _ -~_                         /    \      ;
           ( ` '@)                       {      |      :
           /                             |      |      :
          /     /}         (  )          |      |     .-  --- farting on
         /     //-=-~-_-_  |  |          \      ;    .'        the h8rs
        /     //     | =._-|  }/ / / /_.==\     ; _.'   *
       ( oo  //|     = )  ~| /.__..-='|    \    :'     **
        ====||*|    / /    + )    \   |_.-~`\   :      |**
           |*| *   / /    / /      \  |     ([ ])     /|||(
       *    |*    /_/    / /       (  ]     `/ \'     /|||_
      **(*   |   (((|   /_/      __/_/__    -| |--    _|_|__
      *|\|             (((|      -----     __|_|__
   _/(h8rs)|__            '''                 -----
     _||_|__              FILE BOX -->

  <div id="filebox" class="draggy" title="导入（出）/保存" data-title="import-save">
    <div class="controls">
	      <img class="ui-hider" src="assets/draggybits/hider.png" alt="minimize">
      <img class="ui-dragger" src="assets/draggybits/dragger.png" alt="drag">

    </div>

    <div id="import" class="inner">
      <h3>导入图画</h3>

      <label for="open-local" class="local" id="open-local-form">
        从临时缓存导入:
        <input type="submit" value="导入" id="open-local" name="open-local" />
      </label>

      <label for="import-pxon" class="pxon" id="import-pxon-form">
        导入pxon格式文档:
        <input type="file" id="import-pxon" name="import-pxon" />
      </label>
    </div>

    <div id="export">
      <h3>导出图画</h3>

	        <label for="save-local" class="local" id="save-local-form">
        保存到临时缓存:
        <input type="submit" value="保存" id="save-local" class="local" />
      </label>
	  
      <label for="save-png" class="png" id="save-png-form">
        导出为png格式:
        <input type="submit" value="保存整个页面" id="save-full" />
        <input type="submit" value="保存选取部分" id="save-selection" />
      </label>



      <label for="export-pxon" class="pxon" id="export-pxon-form">
        导出pxon格式文档</a>:
        <input type="submit" value="导出" id="export-pxon" class="pxon" />
      </label>
    </div>

    <ul class="instructions save">
      <li>选取您需要保存的区域。</li>
    </ul>
  </div>

  <!--
                               <\              _
                                \\          _/{
                         _       \\       _-   -_
                       /{        / `\   _-     - -_
                     _~  =      ( @  \ -        -  -_
                   _- -   ~-_   \( =\ \           -  -_
                 _~  -       ~_ | 1 :\ \      _-~-_ -  -_
               _-   -          ~  |V: \ \  _-~     ~-_-  -_
            _-~   -            /  | :  \ \            ~-_- -_
         _-~    -   _.._      {   | : _-``               ~- _-_
      _-~   -__..--~    ~-_  {   : \:}    --- hi h8rs
    =~__.--~~              ~-_\  :  /
                               \ : /__
                              //`Y'--\\
                             <+       \\
                              \\      WWW
                              MMM        COLORBOX -->

  <div id="colorbox" class="draggy" title="调色板" data-title="colors">
    <div class="controls">
	      <img class="ui-hider" src="assets/draggybits/hider.png" alt="minimize">
      <img class="ui-dragger" src="assets/draggybits/dragger.png" alt="drag">

    </div>

    <ul class="tabs">
      <li class="pickers active" data-href="#pickers" role="button">拾取颜色</li>
      <li class="palettes" data-href="#custom-palettes" role="button">历史/自定义 调色板</li>
    </ul>

    <div id="pickers">
      <div id="hex-picker">
        <h4>十六进制颜色代码:</h4>
        <span class="pound">#</span><input id="hex-color" type="text" value="000000" /> <img class="icon-button" id="color-dropper" src="assets/dropper.png" alt="color dropper" data-href="#dropper" role="button" title="color dropper" />
      </div>

      <ul class="colors clearfix">
        <li><a class="button color primary cyan" title="cyan" data-color="rgba(0, 255, 255, 1)"> </a></li>
        <li><a class="button color primary magenta" title="magenta" data-color="rgba(255, 0, 255, 1)"> </a></li>
        <li><a class="button color primary yellow" title="yellow" data-color="rgba(255, 255, 0, 1)"> </a></li>
        <li><a class="button color primary black" title="black" data-color="rgba(0, 0, 0, 1)"> </a></li>
        <li><a class="button color primary gray" title="gray" data-color="rgba(128, 128, 128, 1)"> </a></li>
        <li><a class="button color primary white" title="white" data-color="rgba(255, 255, 255, 1)"> </a></li>
        <li><a class="button color transparent" title="erase" data-color="rgba(0, 0, 0, 0)"> </a></li>
      </ul>

      <div id="eight-bit-picker">
        <h4 class="eightbit">点击选择:</h4>
        <canvas id="eight-bit-colors" width="195" height="195"></canvas>
        <div class="color-demo eightbit"></div>
      </div>
    </div>

    <div id="custom-palettes">
      <div id="color-history" class="inner">
        <h4 class="color-history-label">历史:</h4>
        <ul class="color-history-list colors clearfix"></ul>
        <div id="color-history-tools">
          <input type="submit" value="清除" class="clear" />
        </div>
      </div>

      <div id="color-custom" class="palettes inner">
        <h4 class="color-upload-label">自定义颜色板:</h4>
        <ul class="color-custom-list colors clearfix"></ul>
        <div id="color-custom-tools">
          <p>打开含有颜色“名称”与“16进制代码”的csv文档。</p>

          <input type="file" name="upload-palette" class="import" />
          <input type="submit" value="清除" class="clear" />
        </div>
      </div>
    </div>

  </div>

  <div id="save-modal-container" class="modal hidden">
    <div id="save-modal" class="inside-modal">
      <img class="ui-hider" src="assets/draggybits/hider.png" alt="close">

      <h3>保存您的作品!</h3>
      <a href="#" target="_blank"><img id="finished-art" /></a>

      <p>点击，或者“右键”-“图片另存为”!<br />
         <!--<input type="submit" value="或者上传到LZ作品墙,Coming Soon!" id="save-imgur" /></p>
      <p id="link-imgur"></p>-->
    </div>
  </div>

  <div id="open-modal-container" class="modal hidden">
    <div id="open-modal" class="inside-modal">
      <img class="ui-hider" src="assets/draggybits/hider.png" alt="close">

      <h3>您有已经存储的本地作品!</h3>
      <h4>选择其中一个缩略图打开...</h4>

      <ul class="gallery"> </ul>
    </div>
  </div>

<script src="build/vendor.js"></script>
<script src="build/make8bitart.js"></script>
</body>
</html>
